<template>
  <div class="hello">
    <App></App>
    <x-header>接口详情</x-header>

    <group>
      <div style="padding: 20px;">
        <h3><badge text="运行" style="background-color: green;padding: 2px 5px;"></badge>&nbsp;测试无需验证接口 - 1.0</h3>
        <p style="color: #999;margin-top:10px;">测试无需验证接口测试无需验证接口测试无需验证接口测试无需验证接口测试无需验证接口测试</p>
      </div>
    </group>

    <group title="基本信息" label-width="6em" >
      <cell title="服务目录" value="市级住建" ></cell>
      <cell title="供应商" value="睿恒智晟软件" ></cell>
      <cell title="服务有效期" value="2018-05-28 至 2019-01-01" ></cell>
      <cell title="服务状态" value="发布" ></cell>
      <cell primary="content" title="有效期说明" value="这是周期说明这是周期说明这是周期说明这是周期说明这是周期说明这是周期说明这是周期说明这是周期说明这是周期说明" ></cell>
    </group>

    <group title="请求基础信息" label-width="6em" >
      <cell title="接口路径" value="/test/get2" ></cell>
      <cell title="路由方式" value="服务透传" ></cell>
      <cell title="请求协议" value="HTTP" ></cell>
      <cell title="请求方式" value="GET" ></cell>
    </group>

    <group title="请求头" label-width="6em" >
      <x-table :cell-bordered="false" style="background-color:#fff;">
        <thead>
        <tr>
          <th style="width: 8em">标签</th>
          <th>内容</th>
        </tr>
        </thead>
        <tbody>
        <tr>
          <td>ContentType</td>
          <td style="color: #999;">application/json</td>
        </tr>
        <tr>
          <td>Authorization</td>
          <td style="color: #999;word-break:break-all; word-wrap:break-word;line-height: 25px;">DFADGAFGAQEQEFWDFGQRFQDFADGAFGAQEQEFWDFGQRFQDFADGAFGAQEQEFWDFGQRFQ</td>
        </tr>
        </tbody>
      </x-table>
    </group>

    <group title="输入参数" label-width="6em" >
      <x-table :cell-bordered="false" style="background-color:#fff;">
        <thead>
          <tr>
            <th style="width: 8em">参数名</th>
            <th>描述</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>username</td>
            <td style="color: #999;">账号</td>
          </tr>
          <tr>
            <td>password</td>
            <td style="color: #999;">密码</td>
          </tr>
        </tbody>
      </x-table>
    </group>

    <group title="输出参数" label-width="6em" >
      <x-table :cell-bordered="false" style="background-color:#fff;">
        <thead>
        <tr>
          <th style="width: 8em">参数名</th>
          <th>描述</th>
        </tr>
        </thead>
        <tbody>
        <tr>
          <td>code</td>
          <td style="color: #999;">返回代码</td>
        </tr>
        <tr>
          <td>msg</td>
          <td style="color: #999;">返回消息</td>
        </tr>
        <tr>
          <td>desc</td>
          <td style="color: #999;">返回描述</td>
        </tr>
        </tbody>
      </x-table>
    </group>

    <group title="调用服务" label-width="6em" >
      <panel header="" :list="apiList" :type="apiListType" ></panel>
    </group>

    <group title="服务组件" label-width="6em" >
      <panel header="" :list="pluginList" :type="pluginListType" ></panel>
    </group>

    <group title="JSON返回示例" label-width="6em" >
      <tab :line-width=2 active-color='#fc378c' v-model="index">
        <tab-item class="vux-center" :selected="true" key="1">成功返回示例</tab-item>
        <tab-item class="vux-center" key="2">失败返回示例</tab-item>
      </tab>
      <swiper v-model="index" height="100px" :show-dots="false">
        <swiper-item key="1">
          <div class="tab-swiper vux-center">
            <div style="padding: 40px 20px 80px 20px;text-align: center">
            {
              code: 200,
              msg: 'SUCCESS',
              desc: '成功'
            }
            </div>
          </div>
        </swiper-item>
        <swiper-item key="2">
          <div class="tab-swiper vux-center"><div style="padding: 50px 20px;text-align: center">暂无</div></div>
        </swiper-item>
      </swiper>
    </group>

    <div style="height:75px;"></div>
  </div>
</template>
<script>
import App from '../../App'
import { XHeader, Cell, CellBox, CellFormPreview, Group, Badge, XTable, Panel, Tab, TabItem, Swiper, SwiperItem } from 'vux'
// import Vue from 'vue'

// Vue.use(myTabbar)

export default {
  name: 'ApiDetail',
  components: {
    App,
    XHeader,
    Cell,
    CellBox,
    CellFormPreview,
    Group,
    Badge,
    XTable,
    Panel,
    Tab,
    TabItem,
    Swiper,
    SwiperItem
  },
  data () {
    return {
      // 列表类型
      apiListType: '3',
      apiList: [
        {
          src: '',
          fallbackSrc: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
          title: '接入服务一',
          url: {
            path: '/apiDetail?id=1',
            replace: false
          }
        }
      ],
      // 列表类型
      pluginListType: '3',
      pluginList: [
        {
          src: '',
          fallbackSrc: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
          title: '流量控制',
          url: {
            path: '/apiDetail?id=1',
            replace: false
          }
        },
        {
          src: '',
          fallbackSrc: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
          title: '日志管理',
          url: {
            path: '/apiDetail?id=1',
            replace: false
          }
        },
        {
          src: '',
          fallbackSrc: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
          title: 'Basic认证',
          url: {
            path: '/apiDetail?id=1',
            replace: false
          }
        }
      ],
      index: 0
    }
  },
  methods: {

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

